<html>

<head>

<link rel="stylesheet" href="reset-fonts-grids.css" type="text/css" media="screen" />
<link rel="stylesheet" href="sudoku.css" type="text/css" media="screen" />

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="yahoo-dom-event.js"></script>
<script src="isolace.js"></script>
<script src="sudoku-logic.js"></script>
<script src="sudoku-ui.js"></script>

<link rel="stylesheet" href="sudoku-render-text.css" type="text/css" media="screen" />
<script src="sudoku-render-text.js"></script>

<link rel="stylesheet" href="sudoku-selection-background.css" type="text/css" media="screen" />
<script src="sudoku-selection-background.js"></script>


<script type="text/javascript">
    var problem = [5, 8, 2, 6, 3, 1, 7, 4, 9, 1, 7, 6, 4, 9, 8, 3, 2, 5, 4, 3, 9, 7, 5, 2, 1, 6, 8, 3, 1, 8, 5, 2, 7, 4, 9, 6, 2, 5, 4, 3, 6, 9, 8, 7, 1, 9, 6, 7, 1, 8, 4, 5, 3, 2, 8, 9, 3, 2, 4, 5, 6, 1, 7, 7, 4, 5, 9, 1, 6, 2, 8, 3, 6, 2, 1, 8, 7, 3, 9, 5, 4];
    var mask = [5, 7, 9, 12, 14, 17, 18, 20, 23, 24, 25, 26, 30, 31, 33, 36, 40, 42, 43, 47, 48, 52, 56, 57, 59, 61, 62, 65, 66, 67, 68, 70, 71, 74, 77];
    var mask1 = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79];
//    problem = [7, 2, 3, 9, 6, 1, 5, 4, 8, 8, 1, 4, 5, 3, 2, 6, 9, 7, 9, 5, 6, 8, 4, 7, 1, 2, 3, 1, 6, 9, 3, 8, 4, 7, 5, 2, 5, 8, 2, 6, 7, 9, 3, 1, 4, 3, 4, 7, 1, 2, 5, 9, 8, 6, 4, 9, 8, 7, 1, 6, 2, 3, 5, 2, 7, 1, 4, 5, 3, 8, 6, 9, 6, 3, 5, 2, 9, 8, 4, 7, 1];
//    mask = [1, 2, 3, 8, 10, 14, 15, 17, 19, 23, 24, 27, 29, 30, 32, 35, 38, 40, 41, 42, 43, 49, 50, 52, 54, 55, 58, 59, 60, 64, 67, 70, 71, 80, 81];
$(document).ready(function () {
    $logic.initialize(problem, mask);
    $('#someDiv').append($ui.getTimerHTML(10, 700));
    $('#someDiv').append($ui.getBoardHTML(10, 100));
    $ui.startGame($logic);
});

</script>

<style type="text/css">
body, li, a {
    font-family: Arial, sans-serif;
    font-size: 64px;
    text-align: left;
}

</style>
</head>

<body>

<div id='someDiv' style='height: 100%; width: 100%;'>
    &nbsp;
</div>

<div style='display: block; position: absolute; top: 130; left: 700; font-size: 14px'>
Marker - shift 1 to shift 9<br/>
Move left - left arrow, shift tab<br/>
Move right - right arrow, tab<br/>
Move up - up arrow, shift return<br/>
Move down - down arrow, return<br/>
<a style='font-size: 14px' href="javascript:$('#timer').toggle();">Toggle timer</a>
</div>

</body>
</html>